<template>
    <!-- 在这些页面里主页内容都是背景 -->
    <index/>
    <!-- 从这里开始才是主要内容 -->
    <div class="container" v-on:keydown.enter="joinMeeting()">
<div class="head">
  <p>加入课堂</p>
  <hr>
</div>
<div class="title">
  <span>课堂号</span>
  <div class="name"><input type="text" placeholder="输入班级号" v-model="roomId"></div>
</div>
<div class="title">
  <span>入会昵称</span>
  <div class="name"><input type="text" placeholder="输入昵称" ></div>
</div>
<div class="chioce">
  <span>其他</span>
  <div class="other">
    <el-checkbox v-model="checked1" label="入会开启摄像头" size="large" />
    <el-checkbox v-model="checked2" label="视频开启美颜"  size="large" />
    <el-checkbox v-model="checked3" label="入会开启麦克风"  size="large" />
  </div>
  </div>
  <div class="footer">
    <button type="submit" @click="joinMeeting">进入课堂</button>
  </div>
    <img src="../assets/返回.png" class="back" @click="$router.go(-1)" />
</div>
</template>

<script setup>
import router from "@/router";
import store from "@/store";
import axios from "axios";
import { inject, onMounted, ref } from "vue";

const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(false)
var recentTime = ref();
const roomId = ref(); //房间名
const address = inject('address')

onMounted(() => {
  getTime();
});

function getTime() {
  setInterval(() => {
    recentTime.value = new Date();
  }, 1000);
}

async function joinMeeting(){
  //确认信息完整
  if(!roomId.value){
    alert("请输入完整的房间号！")
    console.log(roomId.value)
    return;
  }
  //通过房间号（userId）搜房间id
  await axios({
    url:address + 'admin/room/getRoomByRoomNum',
    method:"PUT",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data:{
      classId:roomId.value
    }
  }).then(res => {
    console.log(res.data)
    //更新房间信息
    store.commit('setRoomData',{
      userId:res.data.data.userId,
      roomName:res.data.data.className,
      roomId:res.data.data.classId
    })
    //跳转到会议界面
    router.push("/meeting")
  }).catch(err => {
      console.error(err)
      //更新房间信息
      store.commit('setRoomData',{
        userId:-1,
        roomName:'默认课堂',
        roomId:-1
      })
      return 0;
  })
  router.push('/class')
}
</script>

<style scoped>

.container {
  width: 800px;
  height: 500px;
  /* width: 62.5rem;
  height: 44rem; */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgb(245, 245, 245);
  box-shadow: 0px 4px 6px gray;
}
.head{
width: 85%;
margin: 0 auto;
}
.head p{
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: center;
}
hr{
    border: 1px solid black;
}
.title{
  width: 100%;
  padding: 30px 10px 10px;
  position: relative;
}
 .title span{
  font-family: 微软雅黑;
  font-size: 20px;
  position: absolute;
  left: 100px;
  top: 45%;
}
 .chioce span{
  font-family: 微软雅黑;
  font-size: 20px;
  position: absolute;
  left: 100px;
  top: 45%;
}
.name{
  width: 40%;
  height: 40px;
  margin: 0 auto;
  font-size: 23px;
}
  .name input{
    width: 100%;
    height: 100%;
    background-color: rgb(238, 238, 238);;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
  }
  .chioce{
  padding: 10px;
  position: relative;
  }
  .other{
  width: 20%;
  height: 40px;
  margin: 0 auto;
  padding: inherit;
  font-size: 15px;
  }
  .footer{
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 100px;
}
.footer button{
  width: 20%;
  height: 30px;
 margin: 0 auto;
  background-color: rgb(238, 238, 238);
  font-size: 20px;
  border-radius: 5px;
  display: block;
  border: 1px solid rgb(186, 185, 185);
}
 .back {
  height: 1.5625rem;
  margin: 10px;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}
</style>
